<!-- 头像组件 -->
<template>
  <view class="y-avatar" :class="{ 'squared': props.round === false, 'rounded': props.round === true }" :style="`--y-avatar-height: ${props.width}rpx; --y-avatar-width: ${props.height}rpx;`">
    <van-image class="y-avatar-img" :src="props.avatar" fit="cover" :round="props.round">
    </van-image>
    {{ props.avatar }}
    <view class="status-bar" v-if="props.SHState == 1 && props.status !== '' ">
      <view class="zoom-text">{{ props.status }}</view>
    </view>
  </view>
</template>

<script setup>
import { computed } from 'vue';

const props = defineProps({
  //头像url
  avatar: {
    type: String,
    default: ''
  },
  //状态，不传不显示
  status: {
    type: String,
    default: null
  },
  // 审核中 1为审核中
  SHState:{
    type: Number,
    default: 0
  },
  //宽
  width: {
    type:Number,
    default: 96
  },
  //高
  height: {
    type: Number,
    default: 96
  },
  //是否圆形
  round: {
    type: Boolean,
    default: true
  }
})

</script>

<style lang="scss" scoped>
  .y-avatar {
    position: relative;
    height: var(--y-avatar-height);
    width: var(--y-avatar-width);
    overflow: hidden;
    &.squared {
      border-radius: 12rpx;
    }
    &.rounded {
      border-radius: calc( var(--y-avatar-height) / 2 );
    }
    .status-bar {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: rgba(0, 0, 0, .5);
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255, 255, 255, 1);
      font-size: 20rpx;
      height: 34rpx;
      .zoom-text {
        zoom: .85
      }
    }
    .y-avatar-img {
      height: var(--y-avatar-height);
      width: var(--y-avatar-width);
    }
  }
</style>